<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />        
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" /> 
<title>金股组合</title>
<link rel="stylesheet" href="css/group.css">
</head>
<body>
<div class="container">
	<!-- 顶部 -->
	<div class="top">
		<div class="top-1">
			<a href="javascript:;" class="collect">收藏</a>
			<h2>3.8462</h2>
			<h3>净值</h3>
			<div class="field flex">
				<div class="subfield flex-1">
					<div class="per">+10.98%</div>
					<div class="des">日收益</div>
				</div>
				<div class="subfield flex-1">
					<div class="per">+128.7%</div>
					<div class="des">近三月</div>
				</div>
				<div class="subfield flex-1">
					<div class="per">+800.7%</div>
					<div class="des">年收益</div>
				</div>
			</div>

		</div>
		<div class="top-2">
			<img src="images/ranking_icon@2x.png" alt="">
			<span>近三月排名领先<i>50.2%</i>的组合</span>
		</div>
	</div>

	<div class="p-infos flex">
		<div class="pic">
			<img src="images/usr_pic.png" alt="">
		</div>
		<div class="infos flex-1">
			<div class="name">
				人妖花 <span class="fans">2384粉丝</span>
			</div>
			<div class="info-l">资格证书：S12206015040015</div>
			<div class="info-l">投资风格：趋势型</div>
			<div class="info-l">归属部门：总部</div>
		</div>
	</div>
	<div class="p-infos flex">
		<div class="pic">
			<img src="images/usr_pic.png" alt="">
		</div>
		<div class="infos flex-1">
			<div class="name">
				人妖花
			</div>
			<div class="info-l">资格证书：S12206015040015</div>
			<div class="info-l">投资风格：趋势型</div>
			<div class="dep-line flex">
				<span class="dep">归属部门：</span>
				<span class="text flex-1">部总部总部总部总部总部总部总部总部总部总部</span>
			</div>
		</div>
	</div>
	<!-- 收益 -->
	<div class="earnings">
		<div class="nav flex">
			<div class="btn flex-1 active">近一月</div>
			<div class="btn flex-1">近三月</div>
			<div class="btn flex-1">近一年</div>
			<div class="btn flex-1">总收益</div>
		</div>
		<div class="b-wrap">
			<div class="t-bar">
				<div class="bar-l">
					收益走趋势
				</div>
				<div class="bar-r">
					<span class="g">组合</span>
					<span class="hs">沪深300</span>
				</div>
			</div>

			<div class="blank">
				<div class="chart" id="chart1" >
					这里放曲线表1
				</div>
				<div class="chart" id="chart2" style="display: none">
					这里放曲线表2
				</div>
				<div class="chart" id="chart3" style="display: none">
					这里放曲线表3
				</div>
				<div class="chart" id="chart4" style="display: none">
					这里放曲线表4
				</div>
			</div>
		</div>
	</div>

	<!-- 调仓 -->
	<div class="stack">
		<div class="nav flex">
			<div class="btn flex-1 active">调仓记录</div>
			<div class="btn flex-1">持仓列表</div>
		</div>
		<div class="stack-wrap">
			<div class="in-wrap">
				<!-- 此处循环调仓记录 -->
				<div class="l-stack">
					<div class="stack-t">调仓时间：2017-01-24  14: 30</div>
					<div class="line-1">
						<!-- 注:买的图标为buy@2x.png;卖的图标为sell@2x.png -->
						<div class="line-1-l"><img src="images/buy@2x.png" alt="">万福生科</div>
						<div class="line-1-r">7.34% → 7.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>

				<div class="l-stack">
					<div class="stack-t">调仓时间：2017-01-24  14: 30</div>
					<div class="line-1">
						<div class="line-1-l"><img src="images/sell@2x.png" alt="">万福生科</div>
						<div class="line-1-r">7.34% → 7.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>

				<div class="l-stack">
					<div class="stack-t">调仓时间：2017-01-24  14: 30</div>
					<div class="line-1">
						<div class="line-1-l"><img src="images/buy@2x.png" alt="">万福生科</div>
						<div class="line-1-r">7.34% → 7.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>

				<div class="l-stack">
					<div class="stack-t">调仓时间：2017-01-24  14: 30</div>
					<div class="line-1">
						<div class="line-1-l"><img src="images/buy@2x.png" alt="">万福生科</div>
						<div class="line-1-r">7.34% → 7.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>
			</div>
			<a class="see-more" href="javascript:;">
				<span>查看更多调仓记录</span>
			</a>
		</div>
		<div class="stack-wrap" style="display: none;">
			<div class="in-wrap">
				<!-- 此处循环调仓记录 -->
				<div class="l-stack">
					<div class="line-1">
						<div class="line-1-l">
							万福生科
						</div>
						<div class="line-1-r">持仓比例：5.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>
				<div class="l-stack">
					<div class="line-1">
						<div class="line-1-l">
							万福生科
						</div>
						<div class="line-1-r">持仓比例：5.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>
				<div class="l-stack">
					<div class="line-1">
						<div class="line-1-l">
							万福生科
						</div>
						<div class="line-1-r">持仓比例：5.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>
				<div class="l-stack">
					<div class="line-1">
						<div class="line-1-l">
							万福生科
						</div>
						<div class="line-1-r">持仓比例：5.00%</div>
					</div>
					<div class="line-2">
						<div class="line-2-l">
							300268
						</div>
						<div class="line-2-r">
							参考成交价: 29.25
						</div>
					</div>
				</div>
				<a class="see-more" href="javascript:;">
					<span>查看更多持仓记录</span>
				</a>
			</div>
		</div>
	</div>

	<!-- 行业配置 -->
	<div class="business-config">
		<div class="title">行业配置</div>
		<div class="chart" id="chart5">
			这里放图表啊
		</div>
	</div>
	
	<!-- 评论区 -->
	<div class="comments">
		<div class="title">评论区</div>
		<div class="c-wrap">
			<div class="c-list">
				<div class="c-top">
					<div class="top-l">张花花<img src="images/Investment-adviser_icon@2x.png" alt=""></div>
					<div class="top-r">13:30</div>
				</div>
				<div class="text">
					当前是弱势行情，获利盘离场的迹象较为明显人气持续回落。市场继续向下寻底的可能性较大操作上，逢高继续减仓，哇哈哈哈嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎
				</div>
			</div>

			<div class="c-list">
				<div class="c-top">
					<div class="top-l">张花花<img src="images/Investment-adviser_icon@2x.png" alt=""></div>
					<div class="top-r">13:30</div>
				</div>
				<div class="text">
					当前是弱势行情，获利盘离场的迹象较为明显人气持续回落。市场继续向下寻底
				</div>
			</div>

			<div class="c-list">
				<div class="c-top">
					<div class="top-l">张花花<img src="images/Investment-adviser_icon@2x.png" alt=""></div>
					<div class="top-r">13:30</div>
				</div>
				<div class="text">
					当前是弱势行情，获利盘离场的迹象较为明显人气持续回落。市场继续向下寻底
				</div>
			</div>

			<div class="empty">
				<img src="images/info_icon@2x.png" alt="">
				<p>暂无评论</p>
			</div>


		</div>
		<div class="func">
			<a href="javascript:;" class="all">
				<img src="images/whole_icon@2x.png" alt=""><span>全部评论</span>
			</a>
			<a href="javascript:;" class="me">
				<img src="images/comment_icon@2x.png" alt=""><span>我要评论</span>
			</a>
		</div>
	</div>


</div>


<div class="footer">
	<a class="now-sign" href="javascript:;">立即签约</a>
</div>
<script src="js/build/lib.js"></script>
<script src="js/lib/echarts.min.js"></script>
<script>
// 页面兼容和交互JS
var group = {
	init: function(){
		// 兼容按压效果
		document.body.addEventListener('touchstart', function () { //...空函数即可
		});
		// 得到char的宽度 防止图表撑不开
		var wchar = $('.blank .chart').width();
		$('.blank .chart').width(wchar);
	},
	// 页面事件
	events: function(){
		// 切换走势图
		$('.earnings .btn').hammer().on('tap',function(){
			$(this)
				.addClass('active')
				.siblings()
				.removeClass('active');
			var _index = $('.earnings .btn').index($(this));
			$('.earnings .blank .chart')
				.eq(_index)
				.show()
				.siblings()
				.hide();
		});

		// 调仓记录
		$('.stack .btn').hammer().on('tap',function(){
			$(this)
				.addClass('active')
				.siblings()
				.removeClass('active');
			var _ind = $('.stack .btn').index($(this));
			$('.stack .stack-wrap')
				.eq(_ind)
				.show()
				.siblings('.stack-wrap')
				.hide();
		});

	},
	// 用户图片兼容,将图放到CSs里面
	usrPic: function(){
		var _imgSrc = $('.p-infos .pic').find('img').prop('src');
		$('.p-infos .pic').css({
			'background': 'url('+_imgSrc+')',
			'background-size': '100%',
    		'background-position': '50% 50%',
    		'background-repeat': 'no-repeat'
		})
	},

	run: function(){
		this.init();
		this.events();
		this.usrPic();
	}
};
group.run();


// ============================
// ======++处理图表的JS++======
// ============================

// 基于准备好的dom，初始化echarts实例
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
var chart3 = echarts.init(document.getElementById('chart3'));
var chart4 = echarts.init(document.getElementById('chart4'));
var chart5 = echarts.init(document.getElementById('chart5'));

var obj1 = {
	xData : ['周一','周二','周三','周四','周五'],
	sData : {
		sLine1: [20, 32, 37, 66, 80],
		sLine2: [12, 80, 71, 84, 88,90, 120, 171, 184, 250]
	}
};
var obj2 = {
	xData : ['周一','周二','周三','周四','周五'],
	sData : {
		sLine1: [10, 12, 33, 26, 80],
		sLine2: [null, 0, 71, 84, 150]
	}
};
var obj3 = {
	xData : ['周一','周二','周三','周四','周五'],
	sData : {
		sLine1: [null, 32, 17, 66, 80],
		sLine2: [9, 0, 12, 8, 10]
	}
};

// 指定图表的配置项和数据
function getOption(obj){
return {
    title: {
        text: ''
    },
    // tooltip: {
    //     trigger: 'axis'
    // },
    // legend: {
    //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    // },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '4%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    color: ['#2297e6','#e62622'],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: obj.xData
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} %'
        }
    },

    //温馨提示：1.如果想当前结点不显示 直接把数组中相应的结点设置为null即可
    // 2.传入的数字即为百分比，如果传入为20，即显示为20%
    series: [
        {
            name:'沪深300',
            type:'line',
            smooth: true,
            data: obj.sData.sLine1
        },
        {
            name:'组合',
            type:'line',
            smooth: true,
            data: obj.sData.sLine2
        }
    ]
};
};
option1 = getOption(obj1);
option2 = getOption(obj2);
option3 = getOption(obj3);
option5 = {
    legend: {
    	orient: 'horizontal',
        bottom: '0',
       	itemWidth: 14,
        itemHeight: 14,
        align: 'left',
        textStyle: {
            color: '#333'
        },
        data:['有色金属有色金属有色金属','化工','电子','钢铁','现金']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            center: ['50%','43%'],
            radius: ['75%', '100%'],
            color: ['#f52642', '#ff9410', '#2297e6', '#26a900', '#d9d9d9'],
            // avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'有色金属有色金属有色金属'},
                {value:310, name:'化工'},
                {value:234, name:'电子'},
                {value:135, name:'钢铁'},
                {value:548, name:'现金'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
chart1.setOption(option1);
chart2.setOption(option2);
chart3.setOption(option3);
chart5.setOption(option5);

</script>
</body>
</html>